svelte styling

• https://stackoverflow.com/questions/65916550/how-do-i-go-about-making-a-re-usable-button-in-svelte
• class를 자식컴포넌트에 넘겨도 서로 다른 스벨트 파일에서 다른 컴포넌트를 스타일링 해줄 수 없다.

js에서 css로 변수 넘기기

js변수를 css변수로 넘기는 방법은 css-in-js로 변수를 선언하여 변경하는 방법 뿐이다. style: binding을 이용하면 좀 더 편하게 할 수 있다.

• css property가 존재하는 경우 줄여서 작성이 가능
• 좀 더 간단하게는 --var-name 이런 형태로 바로 전달할 수 있기는 하나 컴포넌트의 명세가 불분명해지므로 명시적으로 props 선언을 한다.

<script>
    export let color = 'var(--color-blue-primary)';
    export let backgroundColor = 'var(--color-background-black)';
    export let borderColor = 'var(--color-background-white)';
</script>

<button
    style:color
  style:background-color={backgroundColor} 
  style:--border-color={borderColor}
>
    <slot />
</button>

<style>
    button {
        border-radius: 7px;
        border: 2px solid var(--border-color);
        height: 42px;
        font-size: smaller;

        cursor: pointer;
    }
</style>